<template>
  <div>
    <van-popup v-model="showSend" position="bottom" closeable :style="{ height: '90%', background: '#f7f7f7',width:'100%'}" @close="closeSend">
   <van-search v-model="usernameText" placeholder="请输入用户名称" @search="onsearch" style="margin:45px 0 10px 0;"/>
   <div v-infinite-scroll="getListAll" :infinite-scroll-immediate="false" class="scrollBox" v-if="userList.length && userList[0].userArr.length">
        <div v-for="(item, index) in userList" :key="index">
          <div class="titleSpan">{{ item.name }}</div>
          <div v-for="(cur, ind) in item.userArr" :key="ind" class="userInfo">
            <van-checkbox v-model="cur.checked">{{
              cur.username
            }}</van-checkbox>
            <span style="color: #ccc">{{ cur.dept.name }}</span>
          </div>
        </div>
      </div>
      <div class="bottomHandler">
        <van-button type="info" @click="sendOk">确定</van-button>
      </div>
    </van-popup>
    <!-- <el-dialog
      title="抄送"
      :visible.sync="showSend"
      width="100%"
      style="height: 100vh; background: #f7f7f7"
      @close="closeSend"
    >
      <div v-infinite-scroll="getListAll" class="scrollBox">
        <div v-for="(item, index) in userList" :key="index">
          <div class="titleSpan">{{ item.name }}</div>
          <div v-for="(cur, ind) in item.userArr" :key="ind" class="userInfo">
            <van-checkbox v-model="cur.checked">{{
              cur.username
            }}</van-checkbox>
            <span style="color: #ccc">{{ cur.dept.name }}</span>
          </div>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { listUser } from "@/api/system/user";
import { listSimpleDepts } from "@/api/system/dept";
import { listSimplePosts } from "@/api/system/post";
export default {
  data() {
    return {
      showSend: true,
      userList: [],
      pageNo: 1,
      pageSize: 10,
      deptId: "",
      len: 0,
      isGet: true,
      usernameText:'',
      isGetChild:true
    };
  },
  props: {
    tagsList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created() {
    this.getTreeselect();
  },
  methods: {
    async getList() {
      if (this.isGet) {
        let params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          deptId: this.deptId,
          username:this.usernameText
        };
        let arr = await listUser(params);
        let curarr = this.userList.find((item) => {
          return item.deptId === this.deptId;
        });
        arr.data.list.forEach((v) => {
          v.checked = false;
          if(this.tagsList.length){
             this.tagsList.forEach(c=>{
              if(c.id===v.id){
                v.checked = true;
              }
             })
          }
          
        });
       curarr && curarr.userArr.push(...arr.data.list);
        if (arr.data.list.length == 10) {
          this.pageNo++;
        } else {
          let depid = this.deptId;
          this.len += arr.length;
          let str = this.userList.findIndex((item) => {
            return item.deptId === this.deptId;
          });
          this.deptId = this.userList[str + 1]
            ? this.userList[str + 1].deptId
            : depid;
          
          if (this.deptId!==depid) {
            this.pageNo = 1;

            this.getList();
          }else{
           this.pageNo++;
          }
          if (this.len > 10) {
            this.isGet = false;
          }
        }
      }
    },
    getTreeselect() {
      this.userList = [];
      listSimpleDepts().then((response) => {
        // 处理 deptOptions 参数
        let deptOptions = [];
        deptOptions.push(...this.handleTree(response.data, "id"));
        deptOptions[0].children.forEach((item) => {
          this.userList.push({
            name: item.name,
            deptId: item.id,
            userArr: [],
          });
        });
        this.deptId = this.userList[0].deptId;
        this.getList();
      });
    },
    getListAll() {
      console.log('aaaaa');
      this.len = 0;
      this.isGet = true;
      this.getList();
    },
    onsearch(){
        this.deptId = '';
        this.len = 0;
      this.isGet = true;
      this.pageNo = 1;
        this.getTreeselect();
    },
    closeSend() {
      this.len = 0;
      this.isGet = true;
      this.$emit("closeRecipient");
    },
    sendOk() {
      let checkedArr = [];
      this.userList.forEach((item) => {
        item.userArr.forEach((val) => {
          if (val.checked) {
            delete val.checked;
            checkedArr.push(val);
          }
        });
      });
      this.$emit("userInfo", checkedArr);
        this.$emit("closeRecipient");
    },
  },
};
</script>
<style lang="less" scoped>
.scrollBox {
  width: 100%;
  height: 90%;
  overflow: auto;
  margin: auto;
}
.titleSpan {
  font-weight: bold;
  padding: 10px 6px;
}
.userInfo {
  padding: 0 6px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  
  border-bottom: 1px solid #ccc;
}
.bottomHandler {
  display: flex;
  justify-content: flex-end;
  height: 56px;
  align-items: center;
  width:100%;
}
</style>